<template>
  <div>
    <el-card class="box-card">
      <div style="margin-top: 15px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="来款单位" prop="billingUnit">
              <el-input
                placeholder="请输入来款单位"
                v-model="billingUnit"
                class="input-with-select"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="到账时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="billingTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col> -->
          <el-col :span="2"></el-col>
          <el-col :span="2"
            ><el-button
              type="primary"
              class="el-icon-search"
              @click="GetProjectList()"
              >搜索</el-button
            ></el-col
          >
        </el-row>
      </div>

      <el-row>
        <el-col :span="24">
          <el-row>
            <el-col :span="4">
              <el-button type="primary" @click="add()">新增入账单</el-button>
            </el-col>
            <el-col :span="18">&nbsp;</el-col>
            <el-col :span="2">
              <el-button @click="Go">批量导入</el-button>
              <el-link
                type="primary"
                href="http://localhost:9991/ExcelFile/20230417/入账单_20230417141742.xls"
                >导出Excel表格</el-link
              >
              <el-link
                type="primary"
                href="http://localhost:9991/SaveWordFile/20230417150412/入账单20230417150412.docx"
                >导出Word文档</el-link
              >
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <hr />
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="billingUnit" label="来款单位"> </el-table-column>
        <el-table-column prop="billingId" label="入账单编号"> </el-table-column>
        <el-table-column prop="billingTime" label="财务到账时间">
        </el-table-column>
        <el-table-column prop="billingMoney" label="到账金额(单位：元)">
        </el-table-column>
        <el-table-column label="已分配经费(单位：元)">
          <template #default="scope">{{ scope.row.alreadyMoney }} </template>
        </el-table-column>
        <el-table-column label="未分配经费(单位：元)">
          <template #default="scope"
            >{{ scope.row.billingMoney - scope.row.alreadyMoney }}
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="入账单状态">
          <template #default="scope">
            <span v-if="scope.row.auditStatus == 1" style="color: green"
              >{{ scope.row.progress }}
            </span>
            <span v-if="scope.row.auditStatus == 2" style="color: red"
              >{{ scope.row.progress }}
            </span>
            <span v-if="scope.row.auditStatus == 0" style="color: red"
              >{{ scope.row.progress }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <span v-if="scope.row.auditStatus == 0">
              &nbsp;&nbsp;<el-link
                style="color: red"
                @click="dataeProcess(scope.$index, scope.row)"
                >审核</el-link
              >
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-link @click="dataedit(scope.$index, scope.row)">详情</el-link>
            </span>
            <span
              v-if="
                scope.row.auditStatus == 1 &&
                scope.row.billingMoney - scope.row.alreadyMoney != 0
              "
            >
              <el-link
                size="mini"
                type="primary"
                @click="detail(scope.$index, scope.row)"
                >经费下拨</el-link
              >
              &nbsp;&nbsp;
              <el-link @click="dataedit(scope.$index, scope.row)">详情</el-link>
            </span>
            <span
              v-if="
                scope.row.auditStatus == 2 ||
                (scope.row.auditStatus == 1 &&
                  scope.row.billingMoney - scope.row.alreadyMoney == 0)
              "
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-link @click="dataedit(scope.$index, scope.row)">详情</el-link>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="index"
        :page-sizes="[5, 10, 15, 20]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="Count">
      </el-pagination> -->
      <el-dialog title="详情" v-model="dialogPutVisible">
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item label="入账单编号">
            {{ ruleFormd.billingId }}
          </el-descriptions-item>
          <el-descriptions-item label="来款单位">
            {{ ruleFormd.billingUnit }}
          </el-descriptions-item>
          <el-descriptions-item label="到账时间">
            {{ ruleFormd.billingTime }}
          </el-descriptions-item>
          <el-descriptions-item label="到账金额">
            {{ ruleFormd.billingMoney }}
          </el-descriptions-item>
          <el-descriptions-item label="银行卡号">
            {{ ruleFormd.billingBank }}
          </el-descriptions-item>
          <el-descriptions-item label="摘要">
            {{ ruleFormd.billingAbstract }}
          </el-descriptions-item>
          <el-descriptions-item label="其他">
            {{ ruleFormd.billingRests }}
          </el-descriptions-item>
          <el-descriptions-item label="附件名称">
            {{ ruleFormd.appendixName }}
          </el-descriptions-item>
        </el-descriptions>
        <el-table
          ref="multipleTable"
          :data="tableData1"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="下载/查看附件">
            <template #default="scope">
              <el-link @click="downloadAppendix(scope.row.appendixUrl)"
                >下载</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      alreadyMoney: 0,
      loading: false,
      tableData: [],
      tableData1: [],
      multipleSelection: [],
      ruleFormd: [],
      //size: 5,
      //index: 1,
      //Count: 0,
      billingUnit: "",
      billingTime: undefined,
      dialogPutVisible: false,
      Total: 0,
      billingUnit: "",
      billingTime: "",
    };
  },
  mounted() {
    this.GetProjectList();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //入账单显示
    GetProjectList() {
      //使用构造的URL将HTTP GET请求发送到服务器。
      let url =
        "/api/tb_project_billing/BillingList?billingUnit=" +
        this.billingUnit +
        "&billingTime=" +
        this.billingTime;
      this.http.get(url, {}, true).then((res) => {
        console.log(res);
        //接收到响应后，将数据记录到控制台并分配给tableData属性，该属性用于显示表中的信息。
        this.tableData = res.data;
      });
    },
    //size每页几条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.GetProjectList();
    },
    //index当前第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.index = val;
      this.GetProjectList();
    },
    //详情
    dataedit(index, row) {
      //打开弹框显示
      this.dialogPutVisible = true;
      console.log(row.billingId);
      this.http
        .get("/api/tb_project_billing/GetDetailBiilling?id=" + row.billingId)
        .then((res) => {
          console.log(res);
          //获取基础信息表中的数据
          this.ruleFormd = res.data[0];
          this.tableData1 = res.data;
        });
    },
    //附件下载
    downloadAppendix(url) {
      //打开外部浏览器地址，下载文件
      window.open(url);
    },
    //跳转至新增入账单页面
    add() {
      this.$router.push("/tb_project_billingAdd");
    },
    //跳转至经费下拨列表
    detail(index, row) {
      localStorage.id=row.billingId
      this.$router.push("tb_project_billing_allocationList?id=" + row.billingId);
    },
    //跳转页面进行入账单审核
    dataeProcess(index,row){
      this.$router.push("/tb_project_billing_process?id=" + row.billingId);
    }
  },
};
</script>
<style>
/* .el-select .el-input {
  width: 130px;
} */

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>